<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input
            class="search-input"
            placeholder="搜索商品、品牌"
            v-model="searchKeyword"
            @confirm="handleSearch"
        />
        <uni-icons
            v-if="searchKeyword"
            type="clear"
            size="16"
            color="#999"
            class="clear-icon"
            @tap="clearSearch"
        ></uni-icons>
      </view>
      <text v-if="searchKeyword" class="search-btn" @tap="handleSearch">搜索</text>
      <text v-else class="cancel-btn"></text>
    </view>

    <!-- 排序选项 -->
    <!-- 排序选项 -->
    <view class="sort-options">
      <view
          class="sort-option"
          :class="{active: currentSort === 'default'}"
          @tap="changeSort('default')"
      >
        综合
      </view>
      <view
          class="sort-option"
          :class="{active: currentSort === 'sales'}"
          @tap="changeSort('sales')"
      >
        销量
        <uni-icons
            type="arrow-up"
            size="16"
            color="#999"
            v-if="currentSort === 'sales' && salesSortOrder === 'asc'"
            @tap.stop="toggleSalesSortOrder"
        ></uni-icons>
        <uni-icons
            type="arrow-down"
            size="16"
            color="#999"
            v-else-if="currentSort === 'sales' && salesSortOrder === 'desc'"
            @tap.stop="toggleSalesSortOrder"
        ></uni-icons>
        <uni-icons
            type="arrow-up"
            size="16"
            color="#e4393c"
            v-else-if="currentSort === 'sales' && salesSortOrder === 'asc'"
            @tap.stop="toggleSalesSortOrder"
        ></uni-icons>
        <uni-icons
            type="arrow-down"
            size="16"
            color="#e4393c"
            v-else-if="currentSort === 'sales' && salesSortOrder === 'desc'"
            @tap.stop="toggleSalesSortOrder"
        ></uni-icons>
      </view>
      <view
          class="sort-option"
          :class="{active: currentSort === 'price'}"
          @tap="changeSort('price')"
      >
        价格
        <uni-icons
            type="arrow-up"
            size="16"
            color="#999"
            v-if="currentSort === 'price' && priceSortOrder === 'asc'"
            @tap.stop="togglePriceSortOrder"
        ></uni-icons>
        <uni-icons
            type="arrow-down"
            size="16"
            color="#999"
            v-else-if="currentSort === 'price' && priceSortOrder === 'desc'"
            @tap.stop="togglePriceSortOrder"
        ></uni-icons>
        <uni-icons
            type="arrow-up"
            size="16"
            color="#e4393c"
            v-else-if="currentSort === 'price' && priceSortOrder === 'asc'"
            @tap.stop="togglePriceSortOrder"
        ></uni-icons>
        <uni-icons
            type="arrow-down"
            size="16"
            color="#e4393c"
            v-else-if="currentSort === 'price' && priceSortOrder === 'desc'"
            @tap.stop="togglePriceSortOrder"
        ></uni-icons>
      </view>
      <view
          class="sort-option"
          :class="{active: showFilter}"
          @tap="toggleFilter"
      >
        筛选
      </view>
    </view>

    <!-- 商品列表 -->
    <scroll-view class="product-list" scroll-y>
      <view
          class="product-item"
          v-for="(product, index) in productList"
          :key="index"
          @tap="goToProductDetail(product)"
      >
        <view class="product-img">
          <image
              :src="product.image"
              mode="aspectFill"
              class="product-image"
              v-if="product.image"
          ></image>
          <text class="image-placeholder" v-else>商品图片</text>
        </view>
        <view class="product-info">
          <view class="store-name">{{ product.store }}</view>
          <view class="product-name">{{ product.name }}</view>
          <view class="product-price">￥{{ product.price }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 筛选面板 -->
    <view class="filter-panel" :class="{active: showFilter}">
      <view class="filter-header">
        <text class="filter-title">筛选</text>
        <uni-icons
            type="close"
            size="20"
            color="#999"
            @tap="closeFilter"
        ></uni-icons>
      </view>

      <scroll-view class="filter-content" scroll-y>
        <!-- 品牌筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">品牌</view>
          <view class="brand-list">
            <view
                class="brand-item"
                v-for="(brand, index) in brandList"
                :key="index"
                :class="{active: selectedBrands.includes(brand)}"
                @tap="toggleBrand(brand)"
            >
              {{ brand }}
            </view>
          </view>
        </view>

        <!-- 分类筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">分类</view>
          <view class="category-list">
            <view
                class="category-item"
                v-for="(category, index) in categoryList"
                :key="index"
                :class="{active: selectedCategories.includes(category)}"
                @tap="toggleCategory(category)"
            >
              {{ category }}
            </view>
          </view>
        </view>

        <!-- 价格筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">价格</view>
          <view class="price-inputs">
            <input
                type="number"
                class="price-input"
                placeholder="最低价"
                v-model="minPrice"
            />
            <text class="price-separator">-</text>
            <input
                type="number"
                class="price-input"
                placeholder="最高价"
                v-model="maxPrice"
            />
          </view>
        </view>
      </scroll-view>

      <!-- 筛选操作 -->
      <view class="filter-actions">
        <view class="reset-btn" @tap="resetFilter">重置</view>
        <view class="confirm-btn" @tap="confirmFilter">确定</view>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="overlay" :class="{active: showFilter}" @tap="closeFilter"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentSort: 'default',
      showFilter: false,
      minPrice: '',
      maxPrice: '',
      selectedBrands: [],
      selectedCategories: [],
      brandList: ['爱朴', '阿柯', '百得适', '绅选', '意德', '金泾潮', '科勒KOHLER', 'OULiN'],
      categoryList: ['五金挂件', '卫浴配件', '定制橱柜', '定制淋浴房', '标准浴缸', '水槽'],
      productList: [
        {
          store: '百安居',
          name: '科勒清舒宝盖板系列C3-510/C3-129+滤水壶赠品',
          activity: '礼券活动',
          price: '3499',
          image: '',
          isCollected: false
        },
        {
          store: '百安居',
          name: '科勒瑞雅分体座厕（305/400）+C3-149...',
          activity: '礼券活动',
          price: '4298',
          image: '',
          isCollected: false
        },
        {
          store: '百安居',
          name: '科勒艾贝恒温淋浴柱套餐R75519T+R72312T',
          activity: '礼券活动',
          price: '4099',
          image: '',
          isCollected: false
        },
        {
          store: '百安居',
          name: '科勒欣雅丽龙头套餐R13523T+R13527T',
          activity: '礼券活动',
          price: '2399',
          image: '',
          isCollected: false
        }
      ],
      salesSortOrder: 'asc', // 销量排序顺序：asc升序，desc降序
      priceSortOrder: 'asc'
    }
  },
  computed: {
    filteredProductCount() {
      // 实际项目中这里应该是根据筛选条件计算出的商品数量
      return 331
    }
  },
  methods: {
    clearSearch() {
      this.searchKeyword = '';
    },
    handleSearch() {
      // 处理搜索逻辑
      console.log('搜索关键词:', this.searchKeyword)
      // 这里可以调用API获取搜索结果
    },
    changeSort(sortType) {
      this.currentSort = sortType
      if (sortType === 'sales') {
        this.salesSortOrder = this.salesSortOrder === 'asc' ? 'desc' : 'asc'
      } else if (sortType === 'price') {
        this.priceSortOrder = this.priceSortOrder === 'asc' ? 'desc' : 'asc'
      }
      // 根据排序类型重新获取商品列表
      this.getProductList()
    },
    toggleSalesSortOrder() {
      this.salesSortOrder = this.salesSortOrder === 'asc' ? 'desc' : 'asc'
      this.changeSort('sales')
    },
    togglePriceSortOrder() {
      this.priceSortOrder = this.priceSortOrder === 'asc' ? 'desc' : 'asc'
      this.changeSort('price')
    },
    toggleFilter() {
      this.showFilter = !this.showFilter
    },
    closeFilter() {
      this.showFilter = false
    },
    toggleBrand(brand) {
      const index = this.selectedBrands.indexOf(brand)
      if (index > -1) {
        this.selectedBrands.splice(index, 1)
      } else {
        this.selectedBrands.push(brand)
      }
    },
    toggleCategory(category) {
      const index = this.selectedCategories.indexOf(category)
      if (index > -1) {
        this.selectedCategories.splice(index, 1)
      } else {
        this.selectedCategories.push(category)
      }
    },
    resetFilter() {
      this.selectedBrands = []
      this.selectedCategories = []
      this.minPrice = ''
      this.maxPrice = ''
    },
    confirmFilter() {
      // 应用筛选条件
      this.getProductList()
      this.closeFilter()
    },
    getProductList() {
      // 获取商品列表的逻辑
      // 这里可以调用API，根据排序和筛选条件获取商品
      console.log('获取商品列表，排序:', this.currentSort)
    },
    goToProductDetail(product) {
      // 跳转到商品详情页
      uni.navigateTo({
        url: `/pages/material/goods_detail?id=${product.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 10rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 16rpx 30rpx;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 28rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
}

.clear-icon {
  cursor: pointer;
}

.cancel-btn, .search-btn {
  color: #666;
  font-size: 26rpx;
  min-width: 60rpx;
  text-align: center;
}

.search-btn {
  color: #e4393c;
  font-weight: bold;
}

.cancel-btn {
  color: #666;
  font-size: 26rpx;
}

/* 排序选项 */
.sort-options {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.sort-option {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 24rpx;
  color: #666;
  position: relative;
}

.sort-option.active {
  color: #e4393c;
}

.sort-option.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #e4393c;
}

/* 商品列表 */
.product-list {
  flex: 1;
  padding: 20rpx;
}

.product-item {
  display: flex;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
}

.product-img {
  width: 200rpx;
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  margin-right: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
}

.image-placeholder {
  font-size: 24rpx;
  color: #999;
}

.product-info {
  flex: 1;
}

.store-name {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.product-name {
  font-size: 26rpx;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.activity-tag {
  display: inline-block;
  background-color: #e4393c;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  margin-bottom: 16rpx;
}

.product-price {
  color: #e4393c;
  font-size: 36rpx;
  font-weight: bold;
}

/* 筛选面板 */
.filter-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}

.filter-panel.active {
  right: 0;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.filter-title {
  font-size: 32rpx;
  font-weight: bold;
}

.filter-content {
  flex: 1;
  padding: 0 26rpx;
}

.filter-section {
  margin-bottom: 40rpx;
}

.filter-section-title {
  font-size: 24rpx;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.brand-list, .category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.brand-item, .category-item {
  padding: 16rpx 24rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.brand-item.active, .category-item.active {
  background-color: #e4393c;
  color: #fff;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.price-input {
  flex: 1;
  padding: 16rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.price-separator {
  color: #666;
}

.filter-actions {
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}

.reset-btn, .confirm-btn {
  flex: 1;
  padding: 24rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #333;
  margin-right: 20rpx;
}

.confirm-btn {
  background-color: #e4393c;
  color: #fff;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 99;
  display: none;
}

.overlay.active {
  display: block;
}
</style>